<template>
	<view class="history">
		<view>
		        <view class="inv-h-w">
		                <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0"> 礼品店</view>
		                <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">我的礼品</view>
		        </view>
		        <view class="" v-show="Inv == 0">
		                <view class="header">
		               <view class="giftme">
		               	<view class="">
		               	 	你的礼物
		               	 </view>
		               	<view class="" @click="viewAll" style="color: #8276f7;" >展示全部</view>
		               </view> 
						<!-- 轮播图 -->
						<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
							<swiper class="swiper-box" @change="change" interval="3000" autoplay="true">
								<swiper-item v-for="(item ,index) in info" :key="index">
									<view class="swiper-item">
										{{item.content}}
									</view>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
		                		</view>
		                		<view class="content">
		                			<view class="" style="width: 750rpx;height: 80rpx;line-height: 80rpx;padding: 0 30rpx 0;color: #a3a5a7;font-weight: 600; ">
		                				礼物商店
		                			</view>
		                			<view class="potext"  v-for="(item) in items" :key="item">
		                				<navigator url=""></navigator>
		                			<image :src="item.img" mode=""></image>
		                				<view class="compo">
		                					<view class="na" style="padding:10rpx 0;">
		                						RECHER by <text class="" style="color: #5e76f7;"> {{item.name}}</text>
		                					</view>
											
		                					<view class="" style="color: #bec0c1;font-size: 28rpx;">
		                						{{item.data}}
												
		                					</view>
		                			
		                				</view>
		                				<view class="">
		                					{{item.money}}ETH
		                				</view>
		                				<button style="width:150rpx ;
		                				height: 80rpx;border-radius: 100rpx;background-color: #ea4168;color: #ffffff;line-height: 80rpx;">添加</button>
		                			</view>
		                	
		                		</view>
		            
		                		
		                	</view>
		        </view>
		        <view class="" v-show="Inv == 1">
		     11       11    <!-- <navigator url="pages/mine/mygift/mygift"></navigator> -->
		        </view>
		</view>
	
</template>

<script>
	export default {
		data() {
			return {
					info: [{
								content: '../pages/images/2.png'
							}, {
								content: '../../images/5.png'
							}, {
								content: '../../images/4.png'
							}],
							current: 0,
							mode: 'round',
				    Inv:0,
					items:[
						{img:'../../images/5.png',name:"Komu",data:"2022-2-23 10:20:23",moeny:"2.3"},
						{img:'../pages/images/2.png',name:"Komu",data:"2022-2-23 10:20:23",moeny:"2.3"},	
						{img:'../../images/2.png',name:"Komu",data:"2022-2-23 10:20:23",moeny:"21"},
						{img:'../../images/4.png',name:"Komu",data:"2022-2-23 10:20:23",moeny:"21"},
						{img:'../../images/7.png',name:"Komu",data:"2022-2-23 10:20:23",moeny:"21"}	
						],
			}
		},
		methods: {
			viewAll(){
				
			},
			changeTab(Inv){
			        that.navIdx = Inv;
			         
			},
		buy(){
			uni.navigateTo({
				url:''
			})
		}
		}
	}
</script>

<style lang="scss">
.history{
	width: 750rpx;
	height: 100%;
	
	.header{
		width: 750rpx;
	// height: 200rpx;
	background-color: #fff;
		padding: 30rpx;
		// display: flex;
		// justify-content: space-around;
		.giftme{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
		image{
			width: 250rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}
		.like{
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
		padding: 0 30rpx;
		
		.na{
			margin: 40rpx 0;
			text{
				color: #5e76f7;
			}
		}
		}
	}
	.content{
		width:750rpx;
		height: 100rpx;
		.potext{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			border: 1px solid #dadcdc;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			image{
				width: 200rpx;
				height: 200rpx;
				// border-radius: 50rpx;
				margin: 0 20rpx;
			}
		}
		.compo{
		padding: 40rpx;
			
		}
		
	}
	.bom{
		width: 200rpx;
		height: 60rpx
	}
}
 .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
        .inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
        .inv-h-se{color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;}
        page{background-color: #F2F2F2;}
</style>
